﻿@model billtracker.Models.bill
@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
     <div class="modal-header">
              <a class="close" data-dismiss="modal" onclick="hideMe();">×</a>
              <h3><i class="icon-plus icon-black"></i> New Bill</h3>
            </div>
     <div class="modal-body">
       <div class="editor-label">
            @Html.LabelFor(model => model.name, "Name")
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.name, new { @class = "required", label = "#spanReqName" })
            <span id="spanReqName" class="field-validation-error"></span> 
            @Html.ValidationMessageFor(model => model.name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.amount, "Amount")
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.amount)
            @Html.ValidationMessageFor(model => model.amount)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.frequencyId, "Frequency")
        </div>
        <div class="editor-field">
            @Html.DropDownList("frequencyId")
            @Html.ValidationMessageFor(model => model.frequencyId)
        </div>
  </div> 
}
<div class="modal-footer">
              <input id="save" type="submit" value="Create Bill" onclick="doPost();" class="btn btn-primary" />
            <input type="submit" value="Close" onclick="hideMe();" class="btn"  />
            </div> 
            <script type="text/javascript">
                $(".required").focusout(function () {
                    var val = $(this).val();
                    var lblName = $(this).attr('label');
                    if (!val.length) {
                        //EMPTY STRING
                      //  var errorMSg = $(this).attr('data-val-required')
                     //   $(lblName).html(errorMSg);
                        $(this).css("background-color", "#F8DBDB");
                        $(this).css("border-color", "red");
                    } else {
                        $(this).css("background-color", "White");
                        $(this).css("border-color", "#CCC");
                        $(lblName).html("");
                    }
                }).blur(function () {
                });
</script>
<script type="text/javascript">
    var currentBillName = "";
    function doPost() {

       var url = '@Url.Action("CreateBill", "Bills")';
        $.post(url, $('form').serialize(), function (data) {
            if (data == false) {
                //INVALID FORM OR ERROR
                validateMe();
            }
            else {
                currentBillName = $('#name').val();
                reloadmain();
                hideMe();
            }
            // alert("Data Loaded: " + data);
            //reloadmain();
        })
        //    hideMe();
    }
    function hideMe() {
        $("#backdrop").remove();
        $("#popUp").hide("slow");
    }
    function reloadmain() {
        var url = '@Url.Action("Index", "Bills")' + "?rnd=" + rand();
        $.get(url, function (data) {
            $('#page').html(data);
            $("#info").append("<div class='alert alert-success'><a class='close' data-dismiss='alert'>×</a><strong>" + currentBillName + "</strong> has been successfully created!</div>");
            $("#info").slideDown('slow');
            $("#info").delay(5000).slideToggle('slow');
        });
    }
</script>